<script setup lang="ts">
  import Evaluate from '../Evaluate.vue'
  import Leave from '../Leave.vue'
  import Queue from '../Queue.vue'

  const props = defineProps({
    message: {
      type: Object,
      default: () => ({}),
    },
  })
</script>

<template>
  <div class="w-full px-4 text-center my-3">
    <!-- 文本消息 -->
    <template v-if="props.message.type === 'text'">
      <div class="text-[#828181] text-sm">{{ props.message.content }}</div>
    </template>
    <!-- 自助服务 -->
    <template v-else-if="props.message.type === 'selfService'">
      <self-service :content="props.message.content"></self-service>
    </template>
    <!-- 猜你想问 -->
    <template v-else-if="props.message.type === 'guess'">
      <Guess></Guess>
    </template>
    <!-- 评价 -->
    <template v-else-if="props.message.type === 'evaluate'">
      <Evaluate :message="props.message"></Evaluate>
    </template>
    <!-- 排队 -->
    <template v-else-if="props.message.type === 'queue'">
      <Queue :message="props.message"></Queue>
    </template>
    <template v-else-if="props.message.type === 'leave'">
      <Leave :message="props.message"></Leave>
    </template>
  </div>
</template>

<style scoped></style>
